1 00:00:00,540 --> 00:00:04,660 Hello and welcome to feet you in this field you. 2 00:00:04,680 --> 00:00:09,630 We are going to create a directory for our product. 3 00:00:09,660 --> 00:00:15,560 We will also create the patient email structure for the project. 4 00:00:15,780 --> 00:00:23,580 I'm going to create the directory on my desktop by just right click in ongoing new folder. 5 00:00:23,880 --> 00:00:26,170 And I just gave the falzone. 6 00:00:26,220 --> 00:00:34,050 I'm just going to call it loan calculator so you can also grade their creed the same way if you are 7 00:00:34,140 --> 00:00:36,360 using a Mac. 8 00:00:36,420 --> 00:00:46,470 So that's my directory that I have corded loon calculator next in and want to do is create a hasty mail 9 00:00:46,470 --> 00:00:49,780 structure for the project. 10 00:00:49,920 --> 00:00:57,340 I am going to be using sublime text edit all to create a structure. 11 00:00:57,600 --> 00:01:01,150 So this is the sublime text editor. 12 00:01:01,650 --> 00:01:06,460 I am going to add hastier my code. 13 00:01:06,480 --> 00:01:14,250 I have already pre staged it so I'll just add the code on panel and explain the code line by line. 14 00:01:14,670 --> 00:01:20,080 So the first thing I'm going to do is name my file here. 15 00:01:20,150 --> 00:01:21,020 I'm going to quote. 16 00:01:21,030 --> 00:01:22,180 This is going to be in my head. 17 00:01:22,190 --> 00:01:25,480 TMF Some calling it a loan late or. 18 00:01:25,550 --> 00:01:32,850 This here mail and save it inside my territory which I have called loan calculator. 19 00:01:32,980 --> 00:01:34,940 Want a quick c. 20 00:01:35,070 --> 00:01:40,770 You can see here a display displays the name of the document here on the bottom right. 21 00:01:40,770 --> 00:01:48,660 Also you can see his hastier mail or any chord I add in here will be hastier mail code. 22 00:01:48,660 --> 00:01:54,440 I have added some basic structure to our hastier mail document. 23 00:01:54,460 --> 00:01:56,550 I am just going to run through them with you. 24 00:01:56,590 --> 00:02:02,990 Line one here is the doc type which basically is said declaration to the web browser. 25 00:02:03,180 --> 00:02:10,210 Just to let them know that the type of document you display is his team a document here. 26 00:02:10,260 --> 00:02:15,700 This is where the whole hastier mail document starts from doctype tells the browser. 27 00:02:15,720 --> 00:02:18,630 This is a hastier Mail 5 document. 28 00:02:18,870 --> 00:02:24,760 So from line 3 to a line 23 is what constitutes. 29 00:02:24,810 --> 00:02:27,520 They had told hastier month document. 30 00:02:27,630 --> 00:02:30,430 So we've got the head section inside the head. 31 00:02:30,470 --> 00:02:33,480 So we called the Met up cast set. 32 00:02:33,840 --> 00:02:42,770 This actually period basically refers to the Unicode the type of characters it all accept utf. 33 00:02:42,820 --> 00:02:50,710 It is the standard character format used in the world and here on line 7. 34 00:02:50,720 --> 00:02:53,990 I've got a link to the style --. 35 00:02:54,000 --> 00:03:01,420 I'm going to be using an external style sheet which I will create later and I'm going to call it low 36 00:03:01,490 --> 00:03:02,620 calculator. 37 00:03:02,820 --> 00:03:03,820 Don't see. 38 00:03:03,860 --> 00:03:12,870 So I have just added a title or logon calculator so the title is what will be displayed in the browser 39 00:03:12,870 --> 00:03:13,750 window. 40 00:03:13,950 --> 00:03:17,020 When the application runs. 41 00:03:17,250 --> 00:03:24,030 Moving on to the body section here which this is the opening body tag and that's it close and tag the 42 00:03:24,030 --> 00:03:32,040 body tag physically is where the content for the outroar application is rendered. 43 00:03:32,040 --> 00:03:40,230 So any content you see within the body tag is what is going to be visible to the user. 44 00:03:40,230 --> 00:03:45,760 So here I am God and I am going to wrap the content inside. 45 00:03:45,770 --> 00:03:51,960 Hey Dave and I give giving the Deve an attribute of lone cow here. 46 00:03:51,980 --> 00:03:53,280 Got an Hey one. 47 00:03:53,400 --> 00:03:54,270 Tag. 48 00:03:54,270 --> 00:03:59,050 This is a head tag that will display the title of the application. 49 00:03:59,080 --> 00:04:04,350 We just see a lawn calculator in here in between. 50 00:04:04,360 --> 00:04:12,840 After they grant Im going to add some paragraph the paragraph will serve as input fields for the various 51 00:04:12,840 --> 00:04:15,630 parts of the lawn calculate. 52 00:04:15,930 --> 00:04:17,630 And here are parts of a script. 53 00:04:17,640 --> 00:04:19,700 This will be my javascript. 54 00:04:19,710 --> 00:04:27,570 This is where I will add the logic or the function that would do the actual computing or collation of 55 00:04:27,860 --> 00:04:28,800 Hello. 56 00:04:29,040 --> 00:04:34,920 This is the name I am going to call it when I create the far far. 57 00:04:34,920 --> 00:04:44,820 I have added some paragraph here had three paragraphs here that will be used as input field for us to 58 00:04:45,720 --> 00:04:51,730 input the values that were use to calculate the load. 59 00:04:51,780 --> 00:04:59,780 So here I am caught this will going to be the loan amount and is going to be in dollars of giving. 60 00:05:00,000 --> 00:05:10,270 Puts an idea of the amount the time is going to be in number and the minimum is one maximum five million. 61 00:05:10,450 --> 00:05:11,430 And here. 62 00:05:11,550 --> 00:05:21,220 The on change event the on change event physically occurs when the value of one element has been changed. 63 00:05:21,330 --> 00:05:30,450 So each time the values has been input it changes this on change event here will for this function which 64 00:05:30,450 --> 00:05:39,300 is a computer launch function and to real collate and compute the new value based on the input that 65 00:05:39,300 --> 00:05:40,740 has been entered. 66 00:05:40,950 --> 00:05:47,840 So we'll be creating a function calls compute long later inside our javascript far. 67 00:05:47,840 --> 00:05:53,950 Here we've got on another field here called interest rate and it's going to be in percent. 68 00:05:54,000 --> 00:06:01,160 So this is where we'll put the interest rate and the type of giving it an idea of value of interest 69 00:06:01,160 --> 00:06:08,610 and the score rate that type is going to be no minimum value is zero maximum is going to be great in 70 00:06:08,610 --> 00:06:09,980 terms of interest rate. 71 00:06:10,170 --> 00:06:17,800 I am going to start off with an initial value of 10 percent as the interest rate and then sort of core 72 00:06:17,840 --> 00:06:18,940 here core. 73 00:06:18,990 --> 00:06:32,310 Step step attribute basically is used to specify the legal number of intervals for an input elements 74 00:06:32,310 --> 00:06:39,670 so this tip is basically specifying the legal number of intervals for the import element. 75 00:06:39,700 --> 00:06:46,350 Normally you can use this with the maximum and minimum attributes you can see here. 76 00:06:46,450 --> 00:06:50,580 Minimum attribute it maximum attribute. 77 00:06:50,700 --> 00:06:58,830 Also again we are attaching the on change event so anytime there's value changes it all core base function 78 00:06:58,830 --> 00:07:00,970 here called compute. 79 00:07:01,680 --> 00:07:05,520 And for the other per grab we've got the monts to pay. 80 00:07:05,520 --> 00:07:13,640 So this will be the value to be entered for the amount of month it will take to repay the loan. 81 00:07:13,650 --> 00:07:22,860 So given this import an idea or month type it's going to be a no minimum at least one maximum value 82 00:07:22,890 --> 00:07:30,090 is 300 months from an remands bisley you say equivalent to 25 years. 83 00:07:30,300 --> 00:07:38,230 So we can change his value if you want to do that the value initial value of giving it to be one. 84 00:07:38,710 --> 00:07:50,550 Again I'm using this step I attribute the value of last tip is one again just to re recreate that step 85 00:07:50,610 --> 00:07:58,760 attribute is to specify the lingo the number of intervals for an import element. 86 00:07:59,040 --> 00:07:59,510 Right. 87 00:07:59,640 --> 00:08:07,050 Again here we're calling the change event so any time the Palouse changes it all true this function 88 00:08:07,050 --> 00:08:14,720 here quad computer loan and it re compute the value is entered here. 89 00:08:14,730 --> 00:08:17,630 We've called the haste to eliminate. 90 00:08:17,820 --> 00:08:27,570 This is what will display the actual amount to be paid monthly so the amount you pay monthly will be 91 00:08:27,570 --> 00:08:31,630 displayed inside this page to tag. 92 00:08:31,990 --> 00:08:41,220 So all the values in going here are no are known as attributes the values in green are actually bits. 93 00:08:41,250 --> 00:08:51,330 Our trip is basically provides additional information about hastier male element anywhere you've got 94 00:08:51,330 --> 00:08:58,890 a value here add value attribute physically specifies the value of import elements whatever value you 95 00:08:58,920 --> 00:08:59,880 enter. 96 00:08:59,910 --> 00:09:03,560 This is what is going to capture the value. 97 00:09:03,780 --> 00:09:05,770 So I'm just going to say this. 98 00:09:05,780 --> 00:09:13,540 We've basically finished the structure we can run this inside our hate mail to see what it looks like. 99 00:09:13,770 --> 00:09:20,000 Some just going to open up the directory and double click on this loan calculator. 100 00:09:20,300 --> 00:09:22,240 Talk to hastier email. 101 00:09:22,390 --> 00:09:23,290 You can see here. 102 00:09:23,310 --> 00:09:25,340 This is the basic structure. 103 00:09:25,500 --> 00:09:29,530 So this is exactly how I want the structure to look. 104 00:09:29,610 --> 00:09:37,920 So in the next lecture we'll start doing the javascript part of it will create the logic that will make 105 00:09:37,980 --> 00:09:39,520 all these work. 106 00:09:39,780 --> 00:09:41,500 So that's it for this election. 107 00:09:41,580 --> 00:09:42,750 Thanks for watching. 108 00:09:42,750 --> 00:09:43,610 Bye for now.